<template>
  <div class="page">
    <el-row type="flex" justify="center" align="middle" class="container">
      <el-col :lg="14" :xl="10" class="hidden-md-and-down">
        <el-row class="panel">
          <el-col :span="12">
            <div class="left">
              <img src="../../assets/login/logo.png" class="logo" />
              <img src="../../assets/login/big-1.png" class="big" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="right">
              <div class="title-container">
                <h2>神州医院管理平台</h2>
                <span>V1.0</span>
              </div>
              <div v-if="!qrCodeVisible">
                <div class="row">
                  <el-input v-model="userInfo.username" placeholder="用户名" prefix-icon="user" size="large"
                    clearable></el-input>
                </div>
                <div class="row">
                  <el-input type="password" v-model="userInfo.password" placeholder="密码" prefix-icon="Lock" size="large"
                    clearable></el-input>
                </div>
                <div class="row">
                  <el-button type="primary" class="btn" size="large" @click="login">
                    登陆系统
                  </el-button>
                </div>
                <div class="row"><a class="link" @click="changeMode">二维码登陆</a></div>
              </div>
              <div v-if="qrCodeVisible">
                <div class="qrCode-container">
                  <img :src="qrCode" height="153" class="qrCode" />
                  <img src="../assets/login/phone.png" height="148" />
                </div>
                <div class="row"><a class="link" @click="changeMode">用户名密码登陆</a></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { LoginReq } from "@/service/login";
import { usePermissionStore } from "@/store/permisson";
import { isPassword, isUsername } from "@/utils/validate";
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from "vue-router";

const router = useRouter()
const { setData } = usePermissionStore()

const qrCode = ''
//账号
const userInfo = reactive({
  username: '',
  password: ''
})
// 是否二维码登录
const qrCodeVisible = ref(false)

// 切换二维码登录
const changeMode = () => qrCodeVisible.value = !qrCodeVisible.value

const validate = () => {
  if(isUsername(userInfo.username) && isPassword(userInfo.password)){
    return true
  }else{
    return false
  }
}

// 登录
const login = async () => {
  if(!validate()) {
    return ElMessage.warning("用户名或验证码不符合要求")
  }
  const res = await LoginReq({username: "admin", password: "abc123456"})
  if(res){
      setData(res.data) 
      ElMessage.success("登录成功")
      router.push("/")
    }
}

</script>

<style lang="less" scoped="scoped">
@import url('login.less');
</style>
